<template>
	<view class="foldback-page">
		<view class="top-box">
			<image class="bg" src="@/static/foldback.jpg" mode="aspectFill"></image>
			<view class="box">
				<view class="title">推三返一</view>
				<view class="label">
					<text>邀请好友购买礼包完成三单可获得算力兑换码，</text>
					<text class="share" @click="goShare">去邀请</text>
				</view>
			</view>
			<view class="card">
				<view class="item">
					<view class="label">累计完成次数</view>
					<view class="value">{{ grand_total_num }}</view>
				</view>
				<view class="item">
					<view class="label">累计获得激活码</view>
					<view class="value">{{ grand_total_key }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="tabs-box">
			<view class="item" :class="{ 'active': tabCurrent == 0 }" @click="tabChange(0)">购买记录</view>
			<view class="item" :class="{ 'active': tabCurrent == 1 }" @click="tabChange(1)">已完成</view>
		</view> -->
		<!-- <view class="pay-list" v-if="tabCurrent == 0">
			<view class="item">
				<view class="top">
					<view class="user">
						<image class="avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"></image>
						<view class="info">
							<view class="name">张三</view>
							<view class="id">ID：63002</view>
						</view>
					</view>
					<view class="time">2024-12-23 19:51:01</view>
				</view>
				<view class="bottom">
					<view class="goods-item">
						<image class="image" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"></image>
						<view class="content">
							<view class="title u-line-1">小哇AI成长笔记本</view>
							<view class="specs-box">
								<text class="specs">规格：一份</text>
								<text class="number">x1</text>
							</view>
							<view class="price">
								<text class="icon">￥</text>
								<text>364.74</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="list-box">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="top">
					<view class="value">获得：{{ item.integral }}{{ config.trade_currency_2 }}</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="bottom">
					<view class="user" v-for="(iem, idx) in item.user" :key="idx">
						<image class="avatar" :src="iem.avatar" mode="aspectFill"></image>
						<view class="info">
							<view class="name u-line-1">{{ iem.name }}</view>
							<view class="id">ID：{{ iem.id }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import { getThreeList, getConfig } from '@/api/api'

	export default {
		data () {
			return {
				grand_total_key: 0,
				grand_total_num: 0,
				
				tabCurrent: 0,
				
				config: {},
				
				list: [],
				/* 分页 */
				status: 'loadmore',
				page: 0,
				last_page: 1,
			}
		},
		onLoad() {
			this.loadData()
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		onReachBottom () {
			this.getListData()
		},
		methods: {
			loadData () {
				this.page = 0
				this.last_page = 1
				this.list = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return
				
				this.status = 'loading'
				this.page = ++this.page
				
				const req = await getThreeList({
					page: this.page,
					page_size: 10,
				})
				
				if (req) {
					this.list = this.list.concat(req.data.list.data)
					this.last_page = req.data.list.last_page

					this.grand_total_key = req.data.grand_total_key
					this.grand_total_num = req.data.grand_total_num
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					return ''
				}
			},
			tabChange (index) {
				this.tabCurrent = index
			},
			goShare () {
				uni.switchTab({
					url: '/pages/share/share'
				})
			}
		}
	}
</script>

<style lang="scss">
.foldback-page {
	min-height: 100%;
	background-color: $bg-color;
	.top-box {
		position: relative;
		.bg {
			width: 750rpx;
			height: 650rpx;
		}
		.box {
			position: absolute;
			top: 134rpx;
			left: 0;
			right: 0;
			z-index: 10;
			color: #fff;
			text-align: center;
			.title {
				font-size: 86rpx;
			}
			.label {
				margin-top: 28rpx;
				font-size: 26rpx;
				.share {
					text-decoration: underline;
				}
			}
		}
		.card {
			position: absolute;
			bottom: 0;
			left: 30rpx;
			right: 30rpx;
			z-index: 10;
			height: 180rpx;
			padding: 0 30rpx;
			border-radius: 16rpx 16rpx 0 0;
			background-color: #f8f8fd;
			display: flex;
			align-items: center;
			.item {
				width: 33.33%;
				.label {
					color: #666;
					font-size: 24rpx;
				}
				.value {
					margin-top: 10rpx;
					color: #333;
					font-size: 34rpx;
					font-weight: bold;
				}
			}
		}
	}
	.tabs-box {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: center;
		.item {
			width: 200rpx;
			height: 80rpx;
			color: #000;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
			position: relative;
			&.active {
				font-weight: bold;
				&::before {
					content: '';
					display: block;
					width: 62rpx;
					height: 6rpx;
					border-radius: 6rpx;
					background-color: #333;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.pay-list {
		padding: 20rpx 28rpx;
		.item {
			border-radius: 16rpx;
			padding: 0 28rpx;
			background-color: #fff;
			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
			.top {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.user {
					flex: 1;
					display: flex;
					align-items: center;
					.avatar {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}
					.info {
						flex: 1;
						margin-left: 12rpx;
						.name {
							font-size: 24rpx;
						}
						.id {
							margin-top: 8rpx;
							color: #666;
							font-size: 20rpx;
						}
					}
				}
				.time {
					color: #666;
					font-size: 24rpx;
				}
			}
			.bottom {
				padding: 20rpx 0;
				.goods-item {
					display: flex;
					&:not(:last-child) {
						margin-bottom: 20rpx;
					}
					.image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 14rpx;
					}
					.content {
						margin-left: 20rpx;
						flex: 1;
						display: flex;
						flex-direction: column;
						.title {
							color: #333;
							font-size: 30rpx;
						}
						.specs-box {
							margin-top: auto;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.specs {
								color: #888;
								font-size: 24rpx;
							}
							.number {
								color: #333;
								font-size: 24rpx;
							}
						}
						.price {
							margin-top: auto;
							color: #333;
							font-size: 28rpx;
							.icon {
								font-size: 16rpx;
							}
						}
					}
				}
			}
		}
	}
	.list-box {
		padding: 20rpx 28rpx;
		.item {
			border-radius: 16rpx;
			padding: 0 28rpx;
			background-color: #fff;
			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
			.top {
				height: 78rpx;
				border-bottom: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.value {
					color: #000;
					font-size: 28rpx;
					font-weight: bold;
				}
				.time {
					color: #666;
					font-size: 24rpx;
				}
			}
			.bottom {
				padding: 36rpx 0;
				display: flex;
				gap: 16rpx;
				.user {
					flex: 1;
					padding: 12rpx 0;
					display: flex;
					align-items: center;
					.avatar {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}
					.info {
						flex: 1;
						margin-left: 12rpx;
						.name {
							font-size: 24rpx;
						}
						.id {
							margin-top: 8rpx;
							color: #666;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
	.empty-box {
		margin-top: 160rpx;
	}
}
</style>
